<template>
  <div class="info">
    <div class="title">
      <p>项目管理</p>
      <hr/>
    </div>
    <div class="basic">
      <p>基本信息</p>
      <div>
        <a-card>
          <a-card-grid class="card" :hoverable="false">
            <span>项目名称</span>
            <div class="item">
              <span>{{ program.name }}</span>
              <a-button @click="nameOpen = true">编辑</a-button>
            </div>
          </a-card-grid>
          <a-card-grid class="card" :hoverable="false">
            <span>项目编号</span>
            <div class="item">
              <span>{{ program.id }}</span>
              <p/>
            </div>
          </a-card-grid>
          <a-card-grid class="card" :hoverable="false">
            <span>你的权限</span>
            <div class="item">
              <span>{{ program.role }}</span>
              <p/>
            </div>
          </a-card-grid>
          <a-card-grid class="card" :hoverable="false">
            <span>项目简介</span>
            <div class="item">
              <span>{{ program.description }}</span>
              <a-button @click="descOpen = true">编辑</a-button>
            </div>
          </a-card-grid>
          <a-card-grid class="card" :hoverable="false">
            <span>创建时间</span>
            <div class="item">
              <span>{{ program.createTime }}</span>
              <p />
            </div>
          </a-card-grid>
        </a-card>
      </div>
    </div>
    <div class="operate">
      <p>项目设置</p>
      <a-card>
        <a-card-grid class="card" :hoverable="false">
          <span>删除项目</span>
          <div class="item">
            <span>务必谨慎，删除后项目不可以找回</span>
            <a-popconfirm
                title="请确认删除此项目？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="confirm"
            >
              <a-button danger>删除</a-button>
            </a-popconfirm>
          </div>
        </a-card-grid>
      </a-card>
    </div>
  </div>
  <a-modal v-model:open="nameOpen" title="修改名称" cancel-text="取消" ok-text="确认"
           destroy-on-close @cancel="handlerCancel" @ok="handlerNameOk">
    <a-input :status="status" v-model:value="program.name"/>
  </a-modal>
  <a-modal v-model:open="descOpen" title="修改简介" cancel-text="取消" ok-text="确认"
           destroy-on-close @cancel="handlerCancel" @ok="handlerDescOk">
    <a-textarea :rows="7" v-model:value="program.description"/>
  </a-modal>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import axios from "@/axios";
import {message} from "ant-design-vue";
import {onMounted, ref} from "vue";
import router from "@/router";

const id = useRoute().params.id
const nameOpen = ref(false)
const status = ref();
const descOpen = ref(false)

const program = ref({
  id: '',
  name: '',
  description: '',
  role: '',
  createTime: ''
})

const handlerNameOk = () => {
  const name = program.value.name.trim();
  if (name.length === 0) {
    status.value = 'error'
    message.error("项目名称不可为空")
    return
  }
  program.value.name = name;
  axios.put(`/program/${program.value.id}`, program.value).then((response: any) => {
    message.success(response.message)
    nameOpen.value = false;
    getData()
  })
}

const handlerDescOk = () => {
  axios.put(`/program/${program.value.id}`, program.value).then((response: any) => {
    message.success(response.message)
    descOpen.value = false;
    getData()
  })
}

const handlerCancel = () => {
  getData()
}

// 创建页面时获取项目数据
onMounted(() => {
  getData();
})

const confirm = () => {
  axios.delete(`/program/${id}`).then(() => {
    message.success("删除成功")
    // 删除后返回首页
    router.push('/home')
  })
}

const getData = () => {
  axios.get(`/program/${id}`).then((response: any) => {
    program.value = response.data;
  })
}
</script>

<style scoped lang="less">
.info {
  width: 100%;
  height: 100%;
  padding:25px 50px;
  background-color: #fff;
  color: #404653;
  font-size: 20px;

  .title {
    p {
      font-size: 28px;
    }
  }

  .card {
    width: 100%;
    font-size: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .item {
      width: 95%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 150px;
    }
  }

  .operate {
    padding-top: 20px;
  }
}
</style>